<script setup lang="ts">
import SankeyChart from './modules/san-key-chart.vue';
import PieChart from './modules/pie-chart.vue';
import PieChartTwo from './modules/pie-chart-two.vue';
import PieChartThree from './modules/pie-chart-three.vue';


import {
  PieChartOutlined,
  DotChartOutlined,
  FilePdfOutlined
} from '@ant-design/icons-vue';
import { ref } from 'vue';
const collapsed = ref<boolean>(false);
const value1 = ref('lucy');
import type { SelectProps } from 'ant-design-vue';
const selectedKeys = ref<string[]>(['1']);
const options1 = ref<SelectProps['options']>([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'disabled',
    label: 'Disabled',
    disabled: true,
  },
  {
    value: 'yiminghe',
    label: 'Yiminghe',
  },
]);
const focus = () => {
  console.log('focus');
};

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};
</script>

<template>
  <div>
    <a-layout style="min-height: 100%">
      <a-layout-sider v-model:collapsed="collapsed" collapsible>
        <div class="logo" />
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
          <a-menu-item key="1">
            <pie-chart-outlined class="" />
            <a-select ref="select" v-model:value="value1" style="width: 120px" :options="options1" @focus="focus"
              @change="handleChange">
            </a-select>
          </a-menu-item>
          <a-menu-item key="2">
            <DotChartOutlined />
            <span>Option 1</span>
          </a-menu-item>
          <a-menu-item key="3">
            <FilePdfOutlined />
            <span>Option 1</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-content style="margin: 0 16px">
          <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
            <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
              <a-col class="gutter-row" :span="5">
                <div class="gutter-box">col-6</div>
              </a-col>
              <a-col class="gutter-row" :span="5">
                <div class="gutter-box">col-6</div>
              </a-col>
              <a-col class="gutter-row" :span="5">
                <div class="gutter-box">col-6</div>
              </a-col>
              <a-col class="gutter-row" :span="5">
                <div class="gutter-box">col-6</div>
              </a-col>
              <a-col class="gutter-row" :span="4">
                <div class="gutter-box">col-6</div>
              </a-col>
            </a-row>
            <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }" class="mt-[10px]">
              <a-col class="gutter-row" :span="8">
                <div class="gutter-box">
                  <div>2023年合同履行情况</div>
                  <PieChart></PieChart>
                </div>
              </a-col>
              <a-col class="gutter-row" :span="8">
                <div class="gutter-box">
                  <div>2023年经费占比</div>
                  <PieChartTwo></PieChartTwo>
                </div>
              </a-col>
              <a-col class="gutter-row" :span="8">
                <div class="gutter-box">
                  <div>经费履行情况</div>
                  <PieChartThree></PieChartThree>
                </div>
              </a-col>
            </a-row>
            <div>
              <SankeyChart></SankeyChart>
            </div>
            <div class="pt-10px bg-blue">
              <div>措施推荐</div>
              <div>XXXXXXXXXX</div>
            </div>
          </div>
        </a-layout-content>

      </a-layout>
    </a-layout>

  </div>
</template>

<style scoped>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}

.gutter-box {
  background: #0092ff;
  padding: 8px 0;
}
</style>
